<template>
	<view class="order-container">
		<scroll-view id="tab-bar" class="order-nav" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<view v-for="(item, index) in orderStatusList" :key="index" class="uni-tab-item" :id="item.id" :data-current="index" @click="ontabtap" v-if="item.status == 'all' || item.status == 0 || item.status == 1 || item.status == 2 || item.status == 4">
				<text class="uni-tab-item-title" :class="status == index ? 'uni-tab-item-title-active' : ''" >{{ item.name }}</text>
			</view>
		</scroll-view>

		<swiper :current="status" class="swiper-box" style="flex: 1;" :duration="200" @change="ontabchange">
			<swiper-item class="swiper-item" :key="index" v-for="(item, index) in orderStatusList">
				<scroll-view class="order-list" :scroll-y="true" @scrolltolower="scrolltolower">
					<block v-if="orderList[index].list.length">
						<view class="order-item" v-for="(orderItem, orderIndex) in mpOrderList" :key="orderIndex">
							<view class="item-header clearfix">
								<text class="create-time f-left" :selectable="true">{{ orderItem.order_no }}</text>
								<text class="status-name f-right ns-text-color-gray">{{ $util.timeStampTurnTime(orderItem.create_time) }}</text>
							</view>
							<view class="item-body">
								<block v-for="(goodsItem, goodsKey) in orderItem.order_item_list" :key="goodsKey">
									<view class="order-goods-item">
										<navigator class="goods-img" :url="'/pages/order/detail/detail?order_id=' + orderItem.order_id">
											<image :src="$util.img(goodsItem.picture.pic_cover_small)" mode="aspectFill"></image>
										</navigator>
										<view class="goods-info">
											<navigator :url="'/pages/order/detail/detail?order_id=' + orderItem.order_id" class="goods-name">
												<view class="gift-mark" v-if="goodsItem.gift_flag == 1">赠品</view>
												{{ goodsItem.goods_name }}
											</navigator>
											<text class="text ns-text-color">
												<text class="ns-text-color-gray">价格：</text>
												￥{{ goodsItem.price }}
											</text>
											<text class="text" v-if="goodsItem.sku_name">
												<text class="ns-text-color-gray">规格：</text>
												{{ goodsItem.sku_name }}
											</text>
											<text class="text">
												<text class="ns-text-color-gray">数量：</text>
												{{ goodsItem.num }}件
											</text>
										</view>
									</view>
									<view class="order-goods-operating">
										<view><text class="ns-text-color-gray ns-font-size-sm" v-if="goodsItem.shipping_status">已发货</text></view>
										<view>
											<block v-if="goodsItem.gift_flag == 0 && orderItem.is_virtual == 0">
												<!-- 退款/退货 -->
												<block v-if="orderItem.payment_type == 4">
													<view
														class="operating-btn ns-font-size-sm"
														v-if="orderItem.order_money > 0 && orderItem.is_refund == 1 && goodsItem.refund_status == 0 && orderItem.order_status == 2"
													>
														<navigator :url="'/pages/order/refund_detail/refund_detail?order_goods_id=' + goodsItem.order_goods_id">
															退款/退货
														</navigator>
													</view>
												</block>
												<block v-else>
													<block v-if="orderItem.order_money > 0 && orderItem.is_refund == 1 && goodsItem.refund_status == 0">
														<view class="operating-btn ns-font-size-sm">
															<navigator :url="'/pages/order/refund_detail/refund_detail?order_goods_id=' + goodsItem.order_goods_id">
																退款/退货
															</navigator>
														</view>
													</block>
													<block v-else-if="goodsItem.refund_status != 0">
														<view
															class="operating-btn ns-font-size-sm"
															v-if="
																goodsItem.refund_status != 5 &&
																	goodsItem.refund_status != -1 &&
																	goodsItem.refund_status != -2 &&
																	orderItem.order_status != 4 &&
																	orderItem.order_status != 5
															"
															@click="cancelRefund(orderItem.order_id, goodsItem.order_goods_id)"
														>
															取消退款
														</view>
													</block>
												</block>
												<!-- 售后 -->
												<view v-if="orderItem.order_money > 0 && orderItem.order_status == 4" class="operating-btn ns-font-size-sm">
													<navigator :url="'/pages/order/aftersale/aftersale?order_goods_id=' + goodsItem.order_goods_id">
														{{ goodsItem.customer_info == null ? '申请售后' : '查看售后' }}
													</navigator>
												</view>
											</block>
											<block v-if="orderItem.order_money > 0 && goodsItem.refund_status != 0">
												<!-- 退款成功 -->
												<view class="operating-btn ns-font-size-sm">
													<navigator :url="'/pages/order/refund_detail/refund_detail?order_goods_id=' + goodsItem.order_goods_id">
														{{ goodsItem.status_name }}
													</navigator>
												</view>
											</block>
										</view>
									</view>
								</block>
								<view class="order-info">
									<view>
										<text class="ns-text-color">{{ orderItem.order_type_name }}</text>
										<text>{{ orderItem.status_name }}</text>
									</view>
									<view>
										<text class="ns-text-color-gray">
											总价:
											<text class="ns-text-color ns-font-size-lg">￥{{ orderItem.order_money }}</text>
										</text>
									</view>
								</view>
								<view class="order-operating">
									<block v-if="orderItem.order_status == 3 || orderItem.order_status == 4">
										<view class="operating-btn ns-bg-color ns-border-color" v-if="orderItem.is_evaluate == 0 || orderItem.is_evaluate == 1">
											<navigator :url="'/pages/order/evaluate/evaluate?order_id=' + orderItem.order_id + '&again=' + orderItem.is_evaluate">
												{{ orderItem.is_evaluate ? '我要追评' : '我要评价' }}
											</navigator>
										</view>
									</block>
									<block v-if="orderItem.member_operation">
										<view
											class="operating-btn"
											:class="operationItem.class_name"
											v-for="(operationItem, operationKey) in orderItem.member_operation"
											:key="operationKey"
											@click="orderOperation(operationItem.no, orderItem.order_id, orderIndex)"
										>
											{{ operationItem.name }}
										</view>
									</block>
								</view>
							</view>
						</view>
						<uni-load-more :status="orderList[index].loadingType" ></uni-load-more>
					</block>
					<block v-else>
						<view class="empty">
							<image src="" mode="aspectFit" class="empty-image"></image>
							<view class="ns-text-color-gray">暂无相关订单</view>
						</view>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
		<ns-login ref="login" href = 'order_list'></ns-login>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import orderAction from '../public/js/orderAction.js';
import nsLogin from 'components/ns-login/ns-login.vue';

export default {
	components: {
		uniLoadMore,
		nsLogin
	},
	data() {
		return {
			orderType: 'all',
			orderStatus: 'all',
			scrollInto: '',
			status: 0,
			orderStatusList: [
				{
					status: 'all',
					name: '全部',
					id: 'status_0'
				}
			],
			orderList: [
				{
					page: 1,
					totalPage: 1,
					list: [],
					isLoading: false,
					loadingType: 'loading'
				}
			]
		};
	},
	onBackPress(options) {
		this.$util.redirectTo('/pages/member/index/index', {},'tabbar');
		return true;
	},
	onLoad(opation) {
		if (opation.order_type != undefined) this.orderType = opation.order_type;
		if (opation.status != undefined) this.orderStatus = opation.status;
	},
	onShow() {
		var isLogin = false;
		// #ifdef H5
		getApp().checkLogin(() => {
			isLogin = true;
			setTimeout(() => {
				this.$refs.login.clickLogin();
			}, 100);
		});
		// #endif
		// #ifdef MP
		getApp().$vm.checkLogin(() => {
			isLogin = true;
			this.$refs.login.clickLogin();
		});
		// #endif

		if (isLogin) return;

		this.getOrderList('all', 1, 0);
		this.getOrderStatusList();
	},
	methods: {
		ontabtap(e) {
			let index = e.target.dataset.current || e.currentTarget.dataset.current;
			this.switchTab(index);
		},
		switchTab(index) {
			if (this.status === index) {
				return;
			}
			this.status = index;
			this.scrollInto = this.orderStatusList[index].id;
		},
		ontabchange(e) {
			let index = e.target.current || e.detail.current;
			this.switchTab(index);
		},
		/**
		 * 获取订单列表
		 * @param {Object} status
		 */
		getOrderList(status, page, index) {
			if (this.orderList[index].isLoading || page > this.orderList[index].totalPage) return;

			this.orderList[index].isLoading = true;
			this.orderList[index].loadingType = 'loading';

			this.sendRequest({
				url: 'System.Order.order',
				data: {
					order_type: this.orderType,
					status: status,
					page: page
				},
				success: res => {
					this.orderList[index].page = page;
					if (page == 1) {
						this.orderList[index].list = [];
						uni.stopPullDownRefresh();
					}
					if (res.data.data.length) {
						res.data.data.forEach(item => {
							this.orderList[index].list.push(item);
						});
					}
					this.orderList[index].totalPage = res.data.page_count;
					this.orderList[index].isLoading = false;
					this.orderList[index].loadingType = page == this.orderList[index].totalPage ? 'nomore' : 'more';
				}
			});
		},
		/**
		 * 获取订单状态
		 */
		getOrderStatusList() {
			if (this.orderStatusList.length == 1) {
				this.sendRequest({
					url: 'System.Order.orderStatus',
					data: { order_type: this.orderType },
					success: res => {
						if (res.code == 0) {
							var index = 0;
							Object.keys(res.data).forEach(key => {
								index += 1;
								let item = res.data[key];

								if (this.orderStatus == item.status_id) this.status = index;

								this.orderStatusList.push({
									status: item.status_id,
									name: item.status_name,
									id: 'status_' + index
								});
								this.orderList.push({
									page: 1,
									totalPage: 1,
									list: [],
									isLoading: false
								});

								this.getOrderList(item.status_id, 1, index);
							});
						}
					}
				});
			}
		},
		scrolltolower() {
			let index = this.status;
			this.getOrderList(this.orderStatusList[index].status, this.orderList[index].page + 1, index);
		},
		/**
		 * 取消退款
		 */
		cancelRefund(order_id, order_goods_id) {
			uni.showModal({
				title: '提示',
				content: '您确定要取消该次退款吗？',
				success: res => {
					if (res.confirm) {
						this.sendRequest({
							url: 'System.Order.cancelOrderRefund',
							data: { order_id, order_goods_id },
							success: res => {
								if (res.data > 0) {
									this.$util.showToast({ title: '取消成功' });
									this.getOrderList(this.orderStatusList[this.status].status, 1, this.status);
								}
							}
						});
					}
				}
			});
		},
		/**
		 * 订单操作
		 * @param {Object} operation
		 * @param {Object} order_id
		 */
		orderOperation(operation, order_id, index) {
			switch (operation) {
				case 'pay': //支付
					this.pay(order_id);
					break;
				case 'close': //订单关闭
					this.orderClose(order_id, () => {
						this.getOrderList(this.orderStatusList[this.status].status, 1, this.status);
					});
					break;
				case 'getdelivery': //订单收货
					this.orderDelivery(order_id, () => {
						this.$util.redirectTo('/pages/order/list/list');
					});
					break;
				case 'logistics': //查看物流
					this.$util.redirectTo('/pages/order/logistics/logistics', { order_id });
					break;
				case 'delete_order': //删除订单
					this.deleteOrder(order_id, () => {
						this.orderList[this.status].list.splice(index, 1);
					});
					break;
				case 'pay_presell': //预定金支付
					this.orderPresellPay(order_id);
					break;
				case 'member_pickup': // 买家自提
					this.$util.redirectTo('/pages/order/pickup/pickup', { order_id });
					break;
				default:
					break;
			}
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			let index = this.status;
			this.getOrderList(this.orderStatusList[index].status, 1, index);
		}
	},
	computed: {
		mpOrderList() {
			if (!this.orderList[this.status]) return;
			return this.orderList[this.status].list || [];
		}
	},
	mixins: [http, orderAction]
};
</script>

<style lang="scss">
@import '../public/css/list.scss';
</style>
<style scoped>
.order-container >>> .order-nav .uni-scroll-view::-webkit-scrollbar {
	display: none;
}
</style>
